<template>
  <div class="contact-us">
    <e-head></e-head>
    <div class="main-content">
      <router-info :current="routerInfo"></router-info>
      <div class="flex-container">
        <div class="flex-container-left">
          <div class="flex-left-title">{{ $t("lang.contactUs") }}</div>
        </div>
        <div class="flex-container-right">
          <div class="company-info">
            <div>
              <strong
                >{{ $t("lang.company")
                }}<img
                  :src="require('@/assets/20211015224233.jpg')"
                  title="9(001)"
                  alt="9(001)"
                  style="float: right"
              /></strong>
            </div>
            <div>
              <strong>{{ $t("lang.uPhone") }}:</strong
              ><span> +86 13927496491,+86 15112519529</span>
            </div>
            <div>
              <strong>{{ $t("lang.uEmail") }}:</strong
              ><span> steven@tonme.com, kelly@tonme.com</span>
            </div>
            <div>
              <strong> {{ $t("lang.address") }}:</strong
              ><span> {{ $t("lang.address_value") }}</span>
            </div>
          </div>
          <div class="form-box">
            <Form
              ref="formValidate"
              :model="formValidate"
              :rules="ruleValidate"
            >
              <FormItem :label="$t('lang.uName')" prop="name">
                <Input
                  v-model="formValidate.name"
                  :placeholder="$t('lang.enter') + $t('lang.uName')"
                ></Input>
              </FormItem>
              <FormItem :label="$t('lang.uEmail')" prop="email">
                <Input
                  v-model="formValidate.email"
                  :placeholder="$t('lang.enter') + $t('lang.uEmail')"
                ></Input>
              </FormItem>
              <FormItem :label="$t('lang.uPhone')" prop="phone">
                <Input
                  v-model="formValidate.phone"
                  :placeholder="$t('lang.enter') + $t('lang.uPhone')"
                ></Input>
              </FormItem>
              <FormItem :label="$t('lang.uCompany')" prop="compony">
                <Input
                  v-model="formValidate.compony"
                  :placeholder="$t('lang.enter') + $t('lang.uCompany')"
                ></Input>
              </FormItem>
              <FormItem :label="$t('lang.uTitle')" prop="title">
                <Input
                  v-model="formValidate.title"
                  :placeholder="$t('lang.enter') + $t('lang.uTitle')"
                ></Input>
              </FormItem>
              <FormItem :label="$t('lang.uContent')" prop="content">
                <Input
                  v-model="formValidate.content"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  :placeholder="$t('lang.enter') + $t('lang.uContent')"
                ></Input>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">{{
                  $t("lang.submit")
                }}</Button>
                <Button
                  @click="handleReset('formValidate')"
                  style="margin-left: 8px"
                  >{{ $t("lang.reset") }}</Button
                >
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import RouterInfo from "@/components/router-info.vue";
import { saveContactUs } from "@/utils/api.js";

export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
    RouterInfo,
  },
  data() {
    return {
      formValidate: {
        name: "",
        email: "",
        phone: "",
        compony: "",
        title: "",
        content: "",
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: this.$t("lang.enter") + this.$t("lang.uName"),
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("lang.enter") + this.$t("lang.uEmail"),
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: this.$t("lang.enter") + this.$t("lang.uPhone"),
            trigger: "blur",
          },
        ],
        compony: [
          {
            required: true,
            message: this.$t("lang.enter") + this.$t("lang.uCompany"),
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: this.$t("lang.enter") + this.$t("lang.uTitle"),
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: this.$t("lang.enter") + this.$t("lang.uContent"),
            trigger: "blur",
          },
        ],
      },
      routerInfo: [
        {
          name: "lang.home",
          route: "",
        },
        {
          name: "lang.contactUs",
          route: "",
        },
      ],
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          saveContactUs(this.formValidate).then((res) => {
            this.$Message.success({ content: res.msg });
            this.handleReset("formValidate");
          });
        } else {
          this.$Message.error("请填写完整表单再提交~");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.contact-us {
  .company-info {
    margin-left: 30px;
    line-height: 30px;
  }
  .form-box {
    clear: both;
    padding-left: 30px;
  }
}
</style>